<!--  @author:ymy  -->
<template>
  <div class="course">
    <div class="tabs" @click="changeRoute">
      <div data-tab="/course/classify" data-name="classify" :class="{ 'first-tab': true, 'tab-active': active == '/course/classify' }">分类</div>
      <div data-tab="/course" data-name="course" :class="{ 'tab-active': active == '/course' }">精选</div>
      <div data-tab="/course/fields/1" data-name="1" :class="{ 'tab-active': active == '/course/fields/1' }">日系插画</div>
      <div data-tab="/course/fields/2" data-name="2" :class="{ 'tab-active': active == '/course/fields/2' }">古风插画</div>
      <div data-tab="/course/fields/3" data-name="3" :class="{ 'tab-active': active == '/course/fields/3' }">游戏原画</div>
      <div data-tab="/course/fields/4" data-name="4" :class="{ 'tab-active': active == '/course/fields/4' }">概念设计</div>
      <div data-tab="/course/fields/5" data-name="5" :class="{ 'tab-active': active == '/course/fields/5' }">商业插画</div>
      <div data-tab="/course/fields/6" data-name="6" :class="{ 'tab-active': active == '/course/fields/6' }">纸绘</div>
      <div data-tab="/course/fields/7" data-name="7" :class="{ 'tab-active': active == '/course/fields/7' }">设计</div>
      <div data-tab="/course/fields/8" data-name="8" :class="{ 'tab-active': active == '/course/fields/8' }">模型</div>
      <div data-tab="/course/fields/9" data-name="9" :class="{ 'tab-active': active == '/course/fields/9' }">动画</div>
    </div>
    <div class="main" v-if="$route.path == '/course'">
      <swiper class="carrousel" ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="banner in bannerImg" :key="banner.id">
          <a :href="banner.url">
            <img :src="'https://ss.lanqb.com/' + banner.picture" alt="" />
          </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div v-if="!show">加载中...</div>
      <div v-else>
        <Content :items="handpick" />
        <Content :items="newpick" />
        <Content :items="freepick" />
      </div>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
import Content from './Content';
export default {
  name: 'Course',
  data() {
    return {
      active: '/course',
      bannerImg: [],
      show: false,
      handpick: {
        title: '精选课程',
        secTitle: '筛选课程',
        data: []
      },
      newpick: {
        title: '最新上架',
        secTitle: '查看更多',
        data: []
      },
      freepick: {
        title: '限时免费',
        secTitle: '',
        data: []
      },
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: false,
        autoplay: false
      }
    };
  },
  methods: {
    changeRoute(e) {
      if (e.target.dataset.tab) {
        this.active = e.target.dataset.tab;
        let routeName = e.target.dataset.name;
        this.$router.push({ name: routeName }).catch(() => {});
      }
    }
  },
  components: {
    Content
  },
  async created() {
    this.active = this.$route.path;
    this.$router.push(this.$route.path).catch(() => {});
    const { data } = await this.axiosRq('/lqbapi/series/banners?type=m&limit=6&order=weight&position=3&locality=0', 'GET');
    const data1 = await this.axiosRq('/lqb/api/course/video?is_recommend=Y&limit=8&not_ids=', 'GET');
    const data2 = await this.axiosRq('/lqb/api/course/video?type=1&limit=8&not_ids=1273,1281,529,1117,1210,1143,1413,1233', 'GET');
    const data3 = await this.axiosRq('/lqb/api/course/video?is_free=Y&limit=8&not_ids=1273,1281,529,1117,1210,1143,1413,1233,1463,1462,1461,1460,1459,1458,1457,1456', 'GET');
    this.handpick.data = data1.data;
    this.newpick.data = data2.data;
    this.freepick.data = data3.data;
    this.bannerImg = data;
    this.show = true;
  }
};
</script>

<style lang="less" scoped>
.course {
  overflow: hidden;
  margin-top: 1.08rem;
  font-size: 0.2rem;
  background-color: white;
  margin-bottom: 0.5rem;
  > .tabs {
    width: 3.43rem;
    height: 0.28rem;
    line-height: 0.28rem;
    display: flex;
    overflow: auto;
    align-items: center;
    padding: 0.195rem 0.16rem 0.16rem;
    position: fixed;
    top: 0.44rem;
    left: 0;
    z-index: 100;
    background-color: white;
    .first-tab {
      margin-left: 0;
    }
    .tab-active {
      font-size: 0.2rem;
      font-weight: bold;
      color: black;
    }
    div {
      font-size: 0.16rem;
      flex-shrink: 0;
      margin-left: 0.16rem;
      color: #a4a4a4;
    }
  }
  > .main {
    > .carrousel {
      width: 3.43rem;
      height: 1.37rem;
      background-color: #f3f3f3;
      border-radius: 0.1rem;
      > .swiper-pagination {
        text-align: right;
      }
      img {
        width: 3.43rem;
        height: 1.37rem;
        border-radius: 0.1rem;
      }
    }
  }
}
</style>
